<!--
 * @FileDescription:
 * @Author: cjw
 * @Date: 2022/2/7 16:40
 -->
<template>
  <div>
    <List>
      <ListItem v-for="item in plans">
        <ListItemMeta :avatar="item.userHead" :title="item.userName" :description="item.content.substr(0,10)" />
        <template slot="action">
          <li>
            <el-tag>{{ item.tagName }}</el-tag> &nbsp;
            <el-button icon="el-icon-search" @click="detail(item.id)" circle></el-button>
            <el-button type="info" v-if="item.join" round>已参与或已结束</el-button>
            <el-button type="primary" @click="joinPlan(item)" v-else round>参与计划</el-button>
          </li>
        </template>
      </ListItem>
    </List>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-dialog
      title="计划详情"
      :visible.sync="visible"
      :destroy-on-close="close_modal_destroy"
      :close-on-click-modal="close_modal"
      @close="handleCancel"
      width="700px"
    >
      <DetailPlan :id="planId" :info="info"></DetailPlan>
    </el-dialog>
  </div>
</template>

<script>
import {findAllPlans, findPlan, joinPlan} from "@/api/plan";
import DetailPlan from "@/components/lifesquare/detailPlan";
import {sendMatomo} from "@/api/matomo";

export default {
  name: "planGroud",
  components: {DetailPlan},
  data() {
    return {
      plans: [],
      page: 1,
      size: 5,
      total: 0,
      visible: false,
      close_modal_destroy: true,
      close_modal: false,
      planId: undefined,
      info: undefined
    }
  },
  created() {
    this.getAllPlans()
  },
  methods: {
    getAllPlans() {
      findAllPlans(this.page, this.size).then(res => {
        this.plans = res.body.data.dtos
        this.total = res.body.data.total
      })
    },
    detail(id) {
      this.visible = true
      this.planId = id
      sendMatomo(4,'陪伴匹配', '查询', '计划详细,计划id:'+id)
      findPlan(id).then(res => {
        this.info = res.body.data
      })
    },
    joinPlan(item) {
      joinPlan(item.id).then(res => {
        if (res.body.data) {
          this.$message.success("成功参加")
          item.join = true
        }
      })
    },
    handleCurrentChange(page) {
      this.page = page
      this.getAllPlans()
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.planId = undefined
      this.visible = false
      this.getAllPlans()
      this.info = undefined
    }
  }
}
</script>

<style scoped>

</style>
